<template>
  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :small="small" :disabled="disabled"
    :background="background" layout="total, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />
</template>

<script setup>
import { ref,toRefs } from 'vue';
const currentPage = ref(4)
// const pageSize = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const emit = defineEmits(['getCurrentPage']);

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  emit('getCurrentPage',val)
}

const props = defineProps({
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 10
  }
})

const {total, pageSize} = toRefs(props);


</script>

<style lang="scss" scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>